<template>
  <div class="dashboard" v-loading="state.loading">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :xs="24" :sm="16">
        <!-- header -->
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <DCardDetails
              :count="state.dashboardData.user_count"
              :title="'用户数'"
              :todayTotal="state.dashboardData.user_today_count"
              :yesterdayTotal="state.dashboardData.user_yesterday_count"
              :icon="userNum"
            />
          </el-col>
          <el-col :xs="24" :sm="12">
            <DCardDetails
              :count="state.dashboardData.member_count"
              :title="'会员数'"
              :todayTotal="state.dashboardData.member_today_count"
              :yesterdayTotal="state.dashboardData.member_yesterday_count"
              :icon="dashboard_2"
            />
          </el-col>
        </el-row>

        <!-- 订单数据 -->
        <el-card class="box-card">
          <div class="d-title dflex justify-between">
            <div class="f16333 lh32">订单数据</div>
            <!-- 时间选择TimeRangeSelection -->
            <TimeRangeSelection @onTimeSelectionChange="onTimeSelectionChange" />
          </div>
          <el-row class="d-row">
            <el-col :span="4">
              <div class="f14999">订单总数</div>
              <div class="f18333">{{ state.dashboardData.bill_count || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="f14999">未付款单数</div>
              <div class="f18333">{{ state.dashboardData.bill_count_nopay || 0 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="f14999">订单销售总额</div>
              <div class="f18333">￥{{ state.dashboardData.bill_sum_pay || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="f14999">日销售额</div>
              <div class="f18333">￥{{ state.dashboardData.bill_today_sum_pay }}</div>
            </el-col>
            <el-col :span="4">
              <div class="f14999">月销售额</div>
              <div class="f18333">￥{{ state.dashboardData.bill_month_sum_pay }}</div>
            </el-col>
          </el-row>

          <!-- chart -->
          <v-chart autoresize style="height: 50vh" ref="chart" :option="optionData.orderData" />
        </el-card>
      </el-col>

      <!-- 右侧 -->
      <el-col :xs="24" :sm="8">
        <DCardDetails
          :count="state.dashboardData.bill_count"
          :title="'订单数'"
          :todayTotal="state.dashboardData.bill_today_count_pay"
          :yesterdayTotal="state.dashboardData.bill_yesterday_count_pay"
          :icon="dashboard_3"
        />
        <!-- 用户数据 -->
        <DCardDataChart
          :const_1="state.dashboardData.user_count"
          :const_2="state.dashboardData.member_today_count"
          type="user"
        />

        <!-- 机器人使用数据 -->
        <DCardDataChart :robotData="state.dashboardData" type="robot" />
      </el-col>
    </el-row>
    <!-- 会员分布 -->
    <el-card class="box-card">
      <div class="f16333 lh32">会员分布</div>
      <el-row>
        <el-col :xs="24" :sm="16">
          <el-row class="d-row">
            <el-col :span="6">
              <div class="f14999">会员总数</div>
              <div class="f18333">{{ state.dashboardData.member_count || 0 }}</div>
            </el-col>
            <el-col :span="6">
              <div class="f14999">今日涨</div>
              <div class="f18333">{{ state.dashboardData.member_today_count }}</div>
            </el-col>
            <el-col :span="6">
              <div class="f14999">日活数</div>
              <div class="f18333">{{ state.dashboardData.robotuser_today_count }}</div>
            </el-col>
            <el-col :span="6">
              <div class="f14999">月活数</div>
              <div class="f18333">{{ state.dashboardData.robotuser_month_count }}</div>
            </el-col>
          </el-row>
          <!-- 会员分布chart -->
          <MembershipDistribution :chartData="state.dashboardData.member_city" />
        </el-col>
        <el-col :xs="24" :sm="8">
          <div class="ranking_title mb-50">
            <div class="f16333 lh32">各省会员排名</div>
          </div>
          <el-scrollbar height="46vh">
            <div v-for="(item, index) in state.dashboardData.member_city" :key="index">
              <Ranking v-if="item.name" :index="index" :item="item" />
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import TimeRangeSelection from "@/components/TimeRangeSelection/index.vue"

import DCardDetails from "./components/DCardDetails.vue"
import DCardDataChart from "./components/DCardDataChart.vue"
import MembershipDistribution from "./components/MembershipDistribution.vue"
import Ranking from "./components/Ranking.vue"
// import dashboard_1 from '@/assets/dashboard/dashboard_1.svg'
import dashboard_2 from "@/assets/dashboard/dashboard_2.svg"
import dashboard_3 from "@/assets/dashboard/dashboard_3.svg"
import userNum from "@/assets/dashboard/userNum.svg"
// import { city } from "@/utils/urbanDictionary";

import useDashboard, { DashboardData } from "@/hooks/useDashboard"
let { state, getStatisticsData, getDateBill } = useDashboard()

const chart = ref<any>(null)

const optionData = reactive({
  orderData: {}
})
// mock
const d = reactive<any>({
  // xData: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6', '12/7', '12/8', '12/9', '12/10', '12/11', '12/12', '12/13'], //横坐标
  // yData: [23, 24, 18, 25, 27, 69, 25, 24, 18, 25, 27, 28, 25], //人数数据
  // taskDate: [10, 11, 9, 17, 14, 13, 14, 24, 18, 25, 27, 28, 25],
  // xData: [],
  // yData: [],
  // taskDate: [],
})

// 时间选择监听
const onTimeSelectionChange = async (e: any) => {
  console.log("onTimeSelectionChange发生了改变", e)

  // console.log(getDayAll(e.start_time, e.end_time));
  // d.xData = getDayAll(e.start_time, e.end_time)
  // d.xData = state.dateBill.x
  // d.yData = state.dateBill.y
  await getDateBill(e)
  await getStatisticsData(e)
  initEcharts()
}
const initEcharts = () => {
  // 多列柱状图
  const mulColumnZZTData = {
    xAxis: {
      data: state.dateBill.x,
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#E9E9E9"],
          width: 1,
          type: "dashed"
        }
      }
    },

    // 图例
    legend: {
      data: ["订单数", "未付款订单数", "已付款订单数"],
      icon: "circle", //圆点展示
      top: "0%",
      right: "0%"
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#E9E9E9"],
          width: 1,
          type: "dashed"
        }
      }
    },
    tooltip: {
      trigger: "axis"
    },

    series: [
      {
        type: "bar", //形状为柱状图
        data: state.dateBill.yCount,
        name: "订单数", // legend属性
        itemStyle: {
          // 柱状图颜色
          color: "#3285EF"
        },
        barWidth: 10 // 柱状粗细
      },
      {
        type: "bar", //形状为柱状图
        data: state.dateBill.yNopayData,
        name: "未付款订单数", // legend属性
        itemStyle: {
          // 柱状图颜色
          color: "#E56268"
        },
        barWidth: 10 // 柱状粗细
      },
      {
        type: "bar", //形状为柱状图
        data: state.dateBill.yPayData,
        name: "已付款订单数", // legend属性
        itemStyle: {
          // 柱状图颜色
          color: "#95d475"
        },
        barWidth: 10 // 柱状粗细
      }
    ],
    grid: {
      // show: true, //外边框
      left: "0%", //图表距离容器左侧多少距离
      right: "1%", //图表距离容器右侧侧多少距离
      bottom: "0%", //图表距离容器上面多少距离
      top: 50, //图表距离容器下面多少距离
      containLabel: true //防止标签溢出
    },
    dataZoom: [
      {
        type: "slider",
        show: true, //显示滚动条

        bottom: 20,
        showDataShadow: false, //是否显示数据阴影 默认auto
        borderColor: "transparent", //边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
        height: 10, //滚动条高度
        showDetail: false, //关闭：拖拽时候显示详细数值信息。
        fillerColor: "rgba(221, 225, 229, 1)", //滚动条颜色
        filterMode: "filter",
        realtime: true, //实时更新
        handleStyle: {
          borderWidth: 0,
          color: "rgba(221, 225, 229, 1)"
        }, //SVG图形填充颜色
        textStyle: {
          color: "transparent"
        },
        handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z", //直接画一个圆形SVG矢量路径
        startValue: -6, // 重点在这   -- 开始的值
        endValue: -1, // 重点在这   -- 结束的值
        dataBackground: {
          lineStyle: {
            opacity: 0
          },
          areaStyle: {
            opacity: 0
          }
        },

        brushSelect: false,
        selectedDataBackground: {
          lineStyle: {
            opacity: 0
          },
          areaStyle: {
            opacity: 0
          },
          brushStyle: {
            borderColor: "#f00"
          }
        }
      },
      {
        type: "inside", //滚动条内置在坐标系中
        xAxisIndex: [0],
        startValue: -6, // 重点在这   -- 开始的值
        endValue: -1 // 重点在这   -- 结束的值
      }
    ]
  }
  optionData.orderData = mulColumnZZTData
}

onMounted(() => {
  // getStatisticsData()
  // getDateBill(e)
  // getStatisticsData(e)
  // initEcharts()
})
</script>
<style lang="scss" scoped>
:deep(.el-card) {
  margin-bottom: 24px;
}

.d_ranking {
  height: 100px;
  overflow: auto;
}

.dashboard {
  .el-card {
    box-shadow: none;
    border: none;
  }

  .d-title {
    // margin: 20px;
  }

  .d-row {
    line-height: 30px;
    margin: 20px 0;
  }
}
</style>
